/* 
    Hoja de estilo para el muro / menu, etc.

    Blanco:         #FFFFFF
    Marron Oscuro:  #926836
    Marron Medio:   #C49B65
    Marron Claro:   #F8E7B6
    Negro:          #000000
    Naranja:        #F59434

*/

root { 
    display: block;
}

body{
    background:#F8E7B6;
}
a{
    text-decoration: none;
}
.negrita{
    font-weight: bold;
}
/*VENTANA MODAL(Con FONDO NEGRO TRANSPARENTE*/
div#overlayModal{
    position: absolute;
    width: 1230px;
    height: 1000px;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background-color: black;
    z-index: 98;
    left: 0px;
    top: 0px;
}
div#contenedorModal{
    position: absolute;
    width: 300px;
    min-height: 300px;
    border: 2px solid lightslategrey;
    background-color: white;
    background: url(../images/aje.jpg) no-repeat;
    filter:alpha(opacity=50);
    z-index: 99;
    left: 450px;
    top: 200px;
    
}
div#contenedorModal h1{
    font: bold 14px Lucida;
    display: block;
    width: 270px;
    margin: 5px auto 0 auto;
    text-align: center;
    border-bottom: 1px solid lightslategrey;
}
div#contenedorModal .mensajeInformativo{
    font: bold 12px Verdana;
    text-align: center;
    margin: 15px auto 0 auto;
    height: 35px;
    width: 270px;
    overflow: hidden;
}
div#contenedorModal .mensajeInformativo2{
    min-height: 35px;
    overflow: hidden;
    width: 270px;
    text-align: left;
    font: 12px Verdana;
    margin: 10px 15px 10px 20px;
}
div#contenedorModal .mensajeInformativo2 h1{
    margin-bottom: 10px;
}
div#contenedorModal .cierraEvento{
    margin-top: -6px !important;
    cursor: pointer;
}
div#contenedorModal ul{
    padding-left: 30px;
    padding-right: 10px;
}
div#contenedorModal li{
    font: bold 12px Verdana;
    color: red;
}
div#contenedorModal .botones{
    width: 270px;
    height: 30px;
    margin: 5px auto 10px auto;
}
div#contenedorModal .botones .izquierdo,div#contenedorModal .botones .derecho{
    width: 80px;
    height: 25px;
    border: 1px solid lightslategrey;
    text-align: center;
    display: block;
    overflow: hidden;
}
div#contenedorModal .botones .central{
    width: 80px;
    height: 20px;
    padding-top: 5px;
    border: 1px solid lightslategrey;
    text-align: center;
    overflow: hidden;
    margin: 15px auto 0 auto;
}
div#contenedorModal .botones .central a{
    color: black;
}
div#contenedorModal .botones .izquierdo p,div#contenedorModal .botones .derecho p{
    color: black;
    margin: 3px 0 0 0;
}
div#contenedorModal .botones .izquierdo{
    float: left;
}
div#contenedorModal .botones .izquierdo input,div#contenedorModal .botones .derecho input,div#contenedorModal .botones .central input{
    border: none;
    width: 80px;
    height: 28px;
    margin-top: -3px;
}
div#contenedorModal .botones .derecho{
    float: right;
}

/* #############################################################################
#### CABECERA ##################################################################
############################################################################# */

div#cabecera {
    background:#926836;
    height:45px;
    width:950px;
    margin: 0 auto 0 auto;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
}

div#menu {
    display:inline-block;
    height: 40px;
    width: 750px;
}

div#menu img {
    float:left;
    margin: 0 0 0 10px;
}

div#menu ul {/*Se puede quitar esto creo*/
    width: 480px;
    display: block;
    margin: 14px 0 0 50px;
    padding: 0;
    float: left;
}

div#menu li {
    width: 80px;
    text-align:center;
    display:inline-block;
    font: 14px;
    font-weight: bold;
    font-family:Arial, Helvetica, sans-serif;
    color: #F59434; 
    height: 20px;
}
div#menu li+li{
    border-left: 1px solid #d58b21;
}
div#menu li a{
    color: #f3ad25;
}
div#menu li a:hover{
    color: #fc4f27;
}
div#buscador {
    margin: 0 0 0 0;
    float: right;
    width:190px;
}

div#buscador #rastreador {
    width: 90px;
    height: 15px;
}

div#buscador #enviar {
    width: 30px;
    height: 30px;
    border: none;
    background: url(../images/lupa.png);
}

div#buscador #salir {
    position:relative;
    top:11px;
    left:18px;
}

/* #############################################################################
#### CONTENIDO #################################################################
############################################################################# */

div#contenido {
    width:950px;
    clear: left;
    margin: 0 auto 0 auto;
}

/* ## IZQUIERDA ############################################################# */

div#izquierda {
    float:left;
    /*background: #F8E7B6 url(../images/deg-lat2.JPG) repeat-x; d6ab78 C49B65*/
    background-color: #d6ab78;
    width:200px;
    display:inline-block;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    border-left: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
}

div#miniperfil {
    margin: 5px 5px 5px 5px;
    height:70px;
    width: 190px;
}

div#miniperfil img {
    margin: 0 5px 0 5px;
    float:left;
    border:1px #000000 solid;
}
div#miniperfil p{
    float: right;
    margin: 0 5px 0 0;
    width: 125px;
    height: 50px;
    font: bold 14px Lucida;
}
div#izquierda .invitaciones{
    margin: 5px auto 0 auto;
    font: 11px Arial;
    color: crimson;
    background-color: white;
    border: 1px solid crimson;
    width: 150px;
}

/* ## EVENTOS ################################################################## */

div#eventos {
    clear:left;
    margin: 5px 5px 5px 5px;
}

div#eventos ul {
    background:#F8E7B6;
    margin: 5px 10px 0 10px;
    padding: 15px 0 15px 15px;
}

div#eventos li {
    margin-bottom: 0px;
    
}

div#eventos .nombreevento{
    position:relative;
    left:-4px;
    top:-12px;
    display:block;
    color:#000000;
}

div#eventos .fechaevento{
    position:relative;
    left:50px;
    top:-12px;
    font: 9px Arial;
    color:#926836;
}

div#eventos .asistire{
    position:relative;
    left:50px;
    top:-25px;
    font: 10px Arial;
    color:darkslategrey;
    
}

div#eventos .noasistire{
    position:relative;
    left:50px;
    top:-25px;
    font: 10px Arial;
    color:brown;
    
}

div#eventos #agregar{
    position:relative;
    top:-45px;
    left:9px;
}

/* ## PARTIDAS ################################################################# */

div#partidas {
    clear:left;
    margin: 5px 5px 5px 5px;
}

div#partidas ul {
    background:#F8E7B6;
    margin: 5px 10px 0 10px;
    padding: 15px 0 15px 15px;
}

div#partidas li {
    margin-bottom: 0px;
}

div#partidas .nombrepartida{
    position:relative;
    left:-4px;
    top:-12px;
    display:block;
    color:#000000;
}

div#partidas .estadopartida{
    position:relative;
    left:50px;
    top:-12px;
    font: 9px Arial;
    color:#926836;
}


/* ## DERECHA ############################################################### */

div#derecha {
    float:right;
    /*background: #F8E7B6 url(../images/deg-lat.jpg) repeat-x;*/
    width:200px;
    background-color: #d6ab78;
    display:inline-block;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    border-left: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
}

div#sala {
    clear:left;
    margin: 5px 5px 5px 5px;
}
div#sala h1{
    font-weight: bold;
    font: bold 13px Verdana;
    margin: 10px auto 0 auto;
    text-align: center;
}
div#sala ul {
    background:#F8E7B6;
    margin: 5px auto 0 auto;
    padding: 10px 0 10px 0;
    height: 250px;
    width: 170px;
    overflow: scroll;
}
div#sala ul a{
    display: block;
    height: 20px;
    border-bottom: 1px solid black;
    padding-left: 5px;
    min-width: 220px;
    font: 10px Verdana;
}
div#sala .nombrepartida{
    display: block;
    padding-top: 4px;
    width: 120px;
    color:#000000;
    float: left;
    overflow: hidden;
}

div#sala .estadopartida{
    padding-top: 4px;
    width: 100px;
    float: right;
    overflow: hidden;
}
div#sala ul .turnoActual{
    font-weight: bold;
    color: green;
}
div#sala ul .turnoOponente{
    font-weight: bold;
    color: red;
}
div#sala ul .noEmpezada{
    font-weight: bold;
    color: lightskyblue;
}
#derecha .filtros{
    width: 160px;
    margin: 20px auto 0 auto;
    overflow: hidden;
}

#derecha .filtros h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: block;
    border-bottom: 1px solid #333333;
    width: 160px;
    padding-bottom: 5px;
}
#derecha .filtros ul{
    list-style-type: none;
    padding-left: 15px;
}
#derecha .filtros li{

}
#derecha .filtros .titFiltro{
    display: block;
    width: 140px;
    margin: 20px auto 0 auto;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

/* ## CENTRO ################################################################ */

div#centro {
    width:500px;
    display:inline-block;
    margin: 25px auto 0 17px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}

div#estado {
    background:#d6ab78;
    padding: 15px 0 15px 15px;
    width:515px;
    margin-left: -18px;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

div.navegador{
    margin-top:30px;
    float:right;
    text-align: right;
}

div.navegador a{
    color:#000000;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}

div.navegador .active {
    position:relative;
    top: 3px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}

div.navegador .first {
    background: #C49B65;
    display:inline-block;
    border: 1px #926836 solid;
    padding-bottom:3px;
    height: 14px;
    width:14px;
    text-align: center;
}
div.navegador .prev {
    background: #C49B65;
    display:inline-block;
    border: 1px #926836 solid;
    padding-bottom:3px;
    height: 14px;
    width:14px;
    text-align: center;
}
div.navegador .next {
    background: #C49B65;
    display:inline-block;
    border: 1px #926836 solid;
    padding-bottom:3px;
    height: 14px;
    width:18px;
    text-align: center;
}
div.navegador .last {
    background: #C49B65;
    display:inline-block;
    border: 1px #926836 solid;
    padding-bottom:3px;
    height: 14px;
    width:18px;
    text-align: center;
}


/* #############################################################################
#### BUSQUEDA #################################################################
############################################################################# */

#busquedaBlock {
    width:700px;
    display:inline-block;
    margin: 25px auto 0 25px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    float: left;
    margin-bottom: 20px;
}
#busquedaBlock h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: block;
    border-bottom: 1px solid #333333;
    width: 695px;
    padding-bottom: 5px;
}

#busquedaBlock .barraBusqueda{
    width: 685px;
    padding-left: 5px;
    height: 40px;
    margin: 20px auto 0 auto;
}

#busquedaBlock .vistaUsuarios{
    width: 690px;
    height: 730px;
    margin: 30px auto 0 auto;
}

#busquedaBlock .user{
    height: 120px;
    width: 690px;
    border-bottom: 1px solid black;
}

#busquedaBlock .user+.user{
    margin: 30px 0 0 0;
}

#busquedaBlock .user img{
    height: 100px;
    display: block;
    width: 100px;
    border: 1px solid brown;
    float: left;
}
#busquedaBlock .user .userDatos{
    float: left;
    width: 570px;
    height: 100px;
    margin-left: 15px;
}
#busquedaBlock .user .userDatos .izq{
    float: left;
    width: 460px;
    height: 100px;
}

#busquedaBlock .user .userDatos .izq h1{
    color: #926836;
    font: bold 16px Courier;
    overflow: hidden;
    height: 37px;
}
#busquedaBlock .user .userDatos .izq h1 span{
    color: black;
    font: bold 12px Verdana;
}
#busquedaBlock .user .userDatos .izq p{
    font: 11px Arial;
}
#busquedaBlock .user .userDatos .izq p span{
    font: 11px Arial;
    color: darkred;
}
#busquedaBlock .user .userDatos .izq .acciones{
    margin: 5px 0 0 0;
}
#busquedaBlock .user .userDatos .izq .acciones .botonAccionPrimero,#busquedaBlock .user .userDatos .izq .acciones .botonAccionOtros,
div#centro .user .userDatos .der .botonAccionRetar,div#centro .botonAccionInvitarMuroAjeno{
    float: left;
    height: 25px;
    width: 100px;
    font: 10px Arial;
    color: lightslategrey;
}
#busquedaBlock .user .userDatos .izq .acciones .botonAccionOtros,#busquedaBlock .user .userDatos .der .botonAccionRetar{
    margin-left: 15px;
    width: 70px;
}
#busquedaBlock .user .userDatos .der .botonAccionRetar{

}
#busquedaBlock .user .userDatos .der{
    float: right;
    width: 100px;
    height: 80px;
}

/* #############################################################################
#### PIEPAGINA #################################################################
############################################################################# */

div#piepagina {
    clear:both;
    background: none repeat scroll 0 0 #926836;
    margin: 15px auto 0 auto;
    width: 950px;
    height: 50px;
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
div#piepagina p{
    float: left;
    margin: 10px 0 0 10px;
    font: 11px Courier;
    color: black;
}
div#piepagina ul{
    float: right;
    width: 550px;
    margin: 10px 10px 0 0;
    list-style-type: none;
}
div#piepagina li{
    display: inline;
    margin-right: 8px;
    color: black;
    font: 10px Verdana;
}


/* #############################################################################
#### PUBLICACIONES Y COMENTARIOS ###############################################
############################################################################# */

div#publicaciones img {
    display:block;
    margin-right:5px;
    float:left;
}

div#publicaciones em {
    font-weight: bold;
}

div#publicaciones .parrafoPublicacion{
    text-align: justify;
    color: black;
}

div#publicaciones .pie {
    clear:left;
    display:block;
    text-align:right;
    font-style: italic;
}

div.fotopublicacion {
    text-align:center;
    padding:10px 0 10px 170px;
    height:140px;
}


/* ## PUBLICACIONES ######################################################### */

div#nuevapublicacion {
    margin: 20px 0 20px 0;
}

div#nuevapublicacion label{
    display:block;
}

div#nuevapublicacion #texto{
    display: block;
    width: 500px;
    max-width: 500px;
    min-width: 500px;
    height: 50px;
    max-height: 100px;
    min-height: 50px;
}

div#nuevapublicacion #archivo{
    float: right;
    margin-right:-3px;
}

div#nuevapublicacion label{
    display:inline;
}


div.publicacion {
    width:500px;
    margin: 15px 0 5px 0;
    padding: 5px 5px 5px 5px;
    background:#926836;
}

div.publicacion em{
    color:#000000;
}

div.mipublicacion {
    width:500px;
    margin: 15px auto 5px auto;
    padding: 5px 5px 5px 5px;
    background:#926836;
    border: 1px solid #E5E5E5;
}
div.mipublicacion .imgBorrar,.comentario .imgBorrar{
    width: 15px;
    height: 15px;
}

/* ## COMENTARIO ############################################################ */

div.nuevocomentario {
    text-align:right;
    margin: 0px -10px 0px 0;
}

div.nuevocomentario #texto{
    width: 150px;
    height: 15px;
}

div.comentario {
    width:400px;
    margin: 5px auto 5px auto;
    padding: 5px 5px 5px 5px;
    background:#C49B65;
    border-left: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
}

div.comentario em{
    color:#000000;
}


/* #############################################################################
#### MENSAJERIA #################################################################
############################################################################# */

div#izquierda .nuevoMensaje{
    width: 125px;
    height: 25px;
    margin: 20px auto 0 auto;
}

div#centroMensajeria .accionesMensajeria .acciones input,div#izquierda .nuevoMensaje input{
    font:10px Arial;
    margin: 0;
    padding: 0px;
    width: 125px;
    height: 25px;
    color: lightslategrey;
    cursor: pointer;
}
div#izquierda .bandejas{
    width: 180px;
    height: 100px;
    margin: 25px auto 0 20px;
}
div#izquierda .bandejas .seleccionada{
    height: 30px;
    width: 182px;
    background: none repeat scroll 0 0 #F8E7B6;
    padding-top: 1px;
}
div#izquierda .bandejas .seleccionada p{
    font: 10px Courier;
    margin: 8px 0 0 7px;
    color: #000000;
    font-weight: bold;
}
div#izquierda .bandejas .noSeleccionada{
    width: 160px;
    height: 30px;
    padding-top: 1px;
}
div#izquierda .bandejas .noSeleccionada p{
    font: 10px Courier;
    margin: 8px 0 0 7px;
    color: #000000;
}
div#centroMensajeria {
    width:720px;
    display:inline-block;
    margin: 25px auto 0 25px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}
div#centroMensajeria h1{
    font: 18px Lucida;
    font-weight: bold;
}
div#centroMensajeria .accionesMensajeria{
    width: 720px;
    height: 30px;
}
div#centroMensajeria .accionesMensajeria .acciones{
    float: left;
    width: 300px;
}
div#centroMensajeria .accionesMensajeria .acciones p{
    float: left;
    display: block;
    margin-top: 5px;
    color: lightslategrey;
}
div#centroMensajeria .accionesMensajeria .acciones a{
    color: #36679F;
}
div#centroMensajeria .accionesMensajeria .acciones .linkLeft{
    border-right: 1px solid lightslategrey;
    padding-right: 5px;
}
div#centroMensajeria .accionesMensajeria .acciones input{
    margin-left: 10px;
}
div#centroMensajeria .mensajeria{
    height: 715px;
    border-bottom: 1px solid black;
}
div#centroMensajeria .mensajeria .mensaje{
    width: 720px;
    height: 19px;
    display: table-row;
}
div#centroMensajeria .mensajeria .mensaje .margin{
    margin-bottom: 20px;
}
div#centroMensajeria .mensajeria .td1{
    height: 22px;
    width: 150px;
    display: table-cell;
    border-top: 1px solid lightslategrey;
    overflow: hidden;
}
div#centroMensajeria .mensajeria .td1 .checkbox{
    float: left;
    margin-top: 0px;
}
div#centroMensajeria .mensajeria .td1 p{
    margin-top: 0px;
}
div#centroMensajeria .mensajeria .td2{
    height: 22px;
    width: 455px;
    display: table-cell;
    border-top: 1px solid lightslategrey;
    overflow: hidden;
}
div#centroMensajeria .mensajeria .td3{
    height: 22px;
    width: 115px;
    display: table-cell;
    border-top: 1px solid lightslategrey;
    overflow: hidden;
}
div#centroMensajeria .mensajeria .td2 p,div#centroMensajeria .mensajeria .td3 p{
    font: 11px Verdana;
    color: black;
    margin: 5px 0 0 0;
}
div#centroMensajeria .mensajeria .tdFinal{
    border-bottom: 1px solid lightslategrey;
}
.ventanaPrivado{
    width: 300px;
    height: 185px;
}
.ventanaPrivado .errores{
    width: 260px;
    height: 45px;
    margin: 10px auto 0 auto;
    text-align: center;
}
.ventanaPrivado .errores p{
    font: bold 11px Verdana;
    color: red;
    display: block;
    height: 45px;

}
.ventanaPrivado .privadoCabecera{
    width: 270px;
    margin: 10px auto 0 auto;
}

.ventanaPrivado .bajo{
    height: 20px;
}
.ventanaPrivado .alto{
    height: 100px;
}
.ventanaPrivado .privadoCabecera label{
    text-align: center;
    font: bold 12px Verdana;
    display: block;
    float: left;
}
.ventanaPrivado .privadoCabecera input{
    width: 180px;
    font: 11px Arial;
    color: lightslategrey;
}
.ventanaPrivado .privadoCabecera textarea{
    width: 180px;
    height: 95px;
    font: 11px Arial;
    color: lightslategrey;
}

.ventanaPrivado .privadoCabecera input,.ventanaPrivado .privadoCabecera textarea{
    position: absolute;
    right: 15px;
}

.ventanaPrivado .privadoCabecera .eligeBlancas,.ventanaPrivado .privadoCabecera .eligeNegras{
    width: 150px;
    height: 20px;
    float: right;
    text-align: left;
}
.ventanaPrivado .privadoCabecera .eligeBlancas input,.ventanaPrivado .privadoCabecera .eligeNegras input{
     position: relative;
     right: 0;
     width: 5px;
     float: left;   
}
/* #############################################################################
#### ALBUM DE FOTOS ############################################################
############################################################################# */

div#album {
    display:block;
    padding:50px 0 0 0;
}

div#fotos ul{
    margin:  0 0 0 0;
    border-bottom: 1px solid #333333;
}

div#fotos input{
    position:relative;
    top:2px;
}

div#fotos li {
    width: 140px;
    padding: 10px 0px 10px 5px;
    text-align:center;
    display:inline-block;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    color: #000000; 
}

div#album h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: block;
    border-bottom: 1px solid #333333;
    width: 740px;
    margin: 0 205px;
    padding-bottom: 5px;
}

span.acciones{
    position:relative;
    left:540px;
    font: 10px Arial;
    color: lightslategrey;
}

div#fotooriginal {
    position:absolute;
    top:0;
    z-index: 99;
    margin: 0 auto 0 auto;
    
}
/* #############################################################################
#### PERFIL ####################################################################
############################################################################# */

div#perfil {
    display:block;
    padding:50px 40px 0 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

div#perfil h2{
    font-size: 14px;
    font-weight: bold;
    display: block;
    border-bottom: 1px solid #333333;
    width: 640px;
    margin: 0 205px;
    padding-bottom: 5px;
}

div#perfil form {
    display:block;
    width:500px;
    margin: 10px auto 0 auto;
}

div#perfil .campo {
    display:block;
    margin: 20px 0 20px 0;
}

div#perfil label {
    position:absolute;
}

div#perfil input {
    margin-left: 100px;
}

div#perfil select#sexoReg {
    margin-left: 100px;
}

div#perfil .bloqueFecha label {
    position:relative;
    margin-left:10px;
}

div#perfil .camposubmit {
    display:block;
    width: 600px;
    margin: 40px 0px 20px 20px;
    padding-left: 40px;
    border-top:1px black solid;
    text-align: right;
}

div#fotoperfil{
    position:relative;
    width:100px;
    top:-300px;
    left:530px;
}

div#fotoperfil img {
    display:block;
}

div#fotoperfil .fotoperfilfile{
    position:relative;
    top:20px;
    left:-140px;
    display:block;
}

div#fotoperfil input{
    position:relative;
    top:40px;
    left:-73px;
}
p.avisoMuroAjeno{
    font: bold 12px Verdana;
    margin: 15px auto 20px auto;
}


/* #############################################################################
#### VISTA PARTIDA #############################################################
############################################################################# */

div#partida {
    display:block;
    padding:50px 40px 0 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

div#partida h2{
    font-size: 14px;
    font-weight: bold;
    display: block;
    border-bottom: 1px solid #333333;
    width: 640px;
    margin: 0 205px;
    padding-bottom: 5px;
}

div#partida ul{
    margin-left:200px;
    padding-bottom: 15px;
    border-bottom: 1px black solid;
}

div#partida li{
    margin-top:5px;
}

div#partida em{
    font-weight: bold;
}

div#partida form {
    margin-left:230px;
}
div#partida label{
    display:block;
}